import React, { useLayoutEffect, useState } from "react";
// useLayoutEffect是会优先于useEffect执行
// 是在componentDidMount以后直接同步调用

// 官方建议使用useEffect
// 只有在变量要控制css样式的时候，避免页面闪烁

const App = () => {
  const [tsl, setTsl] = useState(0);

  useLayoutEffect(() => {
    setTsl(200);
  }, []);

  return (
    <>
      <h2>useLayoutEffect</h2>
      <div
        style={{
          width: 300,
          height: 300,
          background: "red",
          transform: "translateX(" + tsl + "px)",
        }}
      ></div>
    </>
  );
};

export default App;
